<template>
  <el-form>
    <el-form-item label="开始时间">
      <el-date-picker
          v-model="startTime"
          type="datetime"
          placeholder="选择开始时间"
          format="YYYY-MM-DD HH:mm:ss"
      ></el-date-picker>
    </el-form-item>
    <el-form-item label="结束时间">
      <el-date-picker
          v-model="endTime"
          type="datetime"
          placeholder="选择结束时间"
          format="YYYY-MM-DD HH:mm:ss"
      ></el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onMenuItemGetScoreClick">查询我的分数</el-button>
    </el-form-item>
    <el-form-item v-if="showDownloadButton">
      <el-button type="success" @click="onMenuItemSocreFileClick">下载所有成员分数</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import {ref} from 'vue';
import {ElMessage} from 'element-plus';
import setting from "@/setting.js";
import {jsonApi} from "@/global.js";
const startTime = ref(''); // 开始时间
const endTime = ref(''); // 结束时间
const userGroups = ref(['reviewer']); // 假设的用户组，实际应从某处获取

// 是否显示下载按钮
const showDownloadButton = ref(userGroups.value.includes('reviewer') || userGroups.value.includes('TDAdmin'));
let accessToken = localStorage.getItem('access_token');
const refreshToken = localStorage.getItem('refresh_token');
// 查询我的分数方法

const onMenuItemGetScoreClick = async () => {

  const requestBody = {
    "interval": [0, 10000000],
    "start_time": startTime.value, // 使用绑定的开始时间
    "end_time": endTime.value // 使用绑定的结束时间
  };
  try {
    const response =await jsonApi('/dataanalysismanager/selfget/',JSON.stringify(requestBody));
    const data = await response.json();
    console.log(data);

    // 检查返回的数据是否包含错误信息，表明token可能无效或过期
    if (!response.ok) {
        ElMessage(
            {
              message: '获取数据失败:'+data.error,
              type:data.error,
              duration: 2000
            }
        );
    } else {
      ElMessage({
        message: '获取分数成功 你的分数是：' + data.score,
        type: 'success',
        duration: 5000, // 这里我使用了一个固定的持续时间，你可以根据需要动态计算
      });
    }

  } catch (error) {
    // 网络错误或其他非token导致的错误
    ElMessage({
      message: '获取数据失败',
      type: 'error',
      duration: 2000
    });
  }
}
// 下载所有成员分数方法
const onMenuItemSocreFileClick = async () => {
  //获取所有用户的当前的分数excelFile
  const accessToken = localStorage.getItem('access_token');
  const refreshToken = localStorage.getItem('refresh_token');
  const requestBody = {
    "users": [],
    "interval": [0, 100000000],
    "start_time": startTime.value, // 使用绑定的开始时间
    "end_time": endTime.value // 使用绑定的结束时间
  };
  try {
    // 使用fetch API发起请求，以获取Excel文件
    const response = await jsonApi('/dataanalysismanager/allgetfile/', JSON.stringify(requestBody));

    // 检查HTTP响应状态
    if (!response.ok) {
      const errorMessage = await response.text();
      ElMessage({
        message: '获取数据失败',
        type: 'error',
        duration: 2000
      });
    }

    // 创建一个blob对象，它表示了一段不可变的原始数据
    const blob = await response.blob();

    // 创建一个链接元素，用于下载文件
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;

    // 设置下载的文件名，确保服务器在响应头中设置了正确的文件名
    let fileName = 'downloaded.xlsx'; // 默认文件名
    const contentDisposition = response.headers.get('content-disposition');
    if (contentDisposition) {
      const fileNameMatch = contentDisposition.match(/filename="?([^"]*)"?$/);
      if (fileNameMatch) {
        fileName = fileNameMatch[1]; // 使用从响应头中提取的文件名
      }
    }

    a.download = fileName;

    // 触发下载
    document.body.appendChild(a);
    a.click();

    // 清理资源
    window.URL.revokeObjectURL(url);
    document.body.removeChild(a);

  } catch (error) {
    // 错误处理
    console.error('An error occurred:', error);
  }

}
</script>